<template>
    <view class="library-category-header">
        <!-- 返回箭头 -->
        <view class="nav-left" @click="handleBack">
            <han-icon name="return" size="36" />
        </view>

        <view class="title">汉服分类</view>

        <view class="icon-search">
            <han-icon name="search" size="38" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 退出页面
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style scoped lang="scss">
.library-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    height: $han-nav-bar-height;
    background-color: $han-global-bg-color;
    border-bottom: 1rpx solid $han-global-border-color;

    .nav-left {
        width: 88rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        font-weight: 600;
    }

    .icon-search {
        width: 88rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
